<template>
  <div id="root">
    <mu-flex justify-content="center" align-items="center">
      <h1 class="title">PHR个人健康服务管理</h1>
    </mu-flex>

    <mu-text-field
            v-model="phoneNumber"
            label="手机号"
            prefix="+86"
            label-float
            full-width
            max-length="11"
            color="primary"
            @change="onPhoneNumberChange"
            :error-text="phoneErrorText"/>

    <mu-flex justify-content="center" align-items="center">
      <mu-flex fill>
        <mu-text-field
                max-length="6"
                v-model="code"
                label="验证码"
                label-float
                full-width
                color="primary"
                :error-text="codeErrorText"/>
      </mu-flex>
      <mu-button id="btnCode" flat color="primary" @click="onGetCodeBtClick"
                 :disabled="isGettingCode">{{ btnGetCode }}
      </mu-button>
    </mu-flex>

    <mu-text-field
            v-model="password"
            label="密码"
            label-float
            full-width
            max-length="32"
            color="primary"
            :error-text="passwordErrorText"
            :action-icon="visibility ? 'visibility_off' : 'visibility'"
            :action-click="function() { visibility = !visibility }"
            :type="visibility ? 'text' : 'password'"
            @change="onPasswordChange"/>

    <mu-text-field
            v-model="idNum"
            label="身份证号"
            label-float
            full-width
            max-length="18"
            color="primary"
            :error-text="idNumErrorText"
            @change="onIdNumChange"/>

    <mu-text-field
            v-model="realName"
            label="真实姓名"
            label-float
            full-width
            color="primary"
            :error-text="realNameErrorText"
            @change="onRealNameChange"/>

    <mu-button
            round
            full-width
            color="primary"
            @click="onRegisterClick">注册
    </mu-button>

    <mu-button
            id="login"
            flat
            color="secondary"
            @click="onLoginClick">登陆
    </mu-button>
  </div>
</template>

<script lang="ts">
  import authService from "../../service/auth/AuthService";
  import {SUCCESS} from "../../common/ErrorCode";

  export default {
    data() {
      return {
        phoneNumber: "",
        phoneErrorText: "",
        code: "",
        codeErrorText: "",
        visibility: false,
        btnGetCode: "获取验证码",
        isGettingCode: false,
        password: "",
        passwordErrorText: "",
        idNum: "",
        idNumErrorText: "",
        realName: "",
        realNameErrorText: "",
      }
    },
    methods: {
      onPhoneNumberChange: function (newValue) {
        if (newValue.length < 11) {
          this.phoneErrorText = "请输入11位的手机号码";
        } else {
          this.phoneErrorText = "";
        }
      },
      onPasswordChange: function (newValue) {
        if (newValue.length < 6) {
          this.passwordErrorText = "密码至少6位";
        } else if (!/[a-zA-Z0-9]{6,}/.test(newValue)) {
          this.passwordErrorText = "密码只支持大小写字母和数字";
        } else {
          this.passwordErrorText = "";
        }
      },
      onIdNumChange: function (newValue) {
        const regex = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
        if (regex.test(newValue) === false) {
          this.idNumErrorText = "身份证不合法";
        } else {
          this.idNumErrorText = "";
        }
      },
      onRealNameChange: function (newValue) {
        if (newValue.length === 0) {
          this.realNameErrorText = "真实姓名不能为空";
        } else {
          this.realNameErrorText = "";
        }
      },
      onGetCodeBtClick: function () {
        if (this.phoneNumber.length === 0 || this.phoneErrorText.length > 0) {
          this.onPhoneNumberChange(this.phoneNumber);
          return;
        }
        if (this.isGettingCode) {
          return;
        }
        this.isGettingCode = true;
        let t = 60;
        this.btnGetCode = `${t}s`;
        let id = setInterval(() => {
          t -= 1;
          this.btnGetCode = `${t}s`;
        }, 1000);
        setTimeout(() => {
          clearInterval(id);
          this.isGettingCode = false;
          this.btnGetCode = "获取验证码";
        }, t * 1000);

        authService.getMessageCode(this.phoneNumber)
            .then(result => {
              if (result.code !== SUCCESS) {
                this.$toast.info(result.message);
              }
            })
            .catch(() => {
              this.$toast.info("网络异常");
            })
      },
      onLoginClick: function () {
        this.$router.push({name: "Login2"})
      },
      onRegisterClick: function () {
        if (this.phoneNumber.length === 0 || this.phoneErrorText.length > 0) {
          this.onPhoneNumberChange(this.phoneNumber);
        } else if (this.password.length === 0 || this.passwordErrorText.length > 0) {
          this.onPasswordChange(this.password);
        } else if (this.idNum.length === 0 || this.idNumErrorText.length > 0) {
          this.onIdNumChange(this.idNum);
        } else if (this.realName.length === 0 || this.realNameErrorText.length > 0) {
          this.onRealNameChange(this.realName);
        } else {
          authService.register(this.phoneNumber, this.code, this.password,
              this.idNum, this.realName).then(result => {
            if (result.code === SUCCESS) {
              let path = this.$store.state.targetPath;
              this.$router.push({name: "Homepage"});
              if (path != null) {
                this.$router.push({path: path});
                this.$store.commit("resetTargetPath");
              }
            } else {
              this.$toast.info(result.message);
            }
          }).catch(() => {
            this.$toast.info("网络异常");
          });
        }
      }
    }
  }
</script>
<style scoped>
  #root {
    padding: 0 5%;
    margin-top: 1vh;
  }

  .title {
    font-size: 1.5em;
    font-weight: 500;
  }

  #btnCode {
    text-transform: none;
    font-size: 1rem;
    background: rgba(153, 153, 153, .2);
    margin-left: 8px;
  }

  #login {
    text-decoration: underline;
    margin-top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
</style>